<template>
  <div class="main">
    <div class="air-column">
      <h2>剩机人</h2>
      <el-form class="member-info"
               v-for="(item,index) in users"
               :key="index">
        <div class="member-info-item">

          <el-form-item label="乘机人类型">
            <el-input v-model="users[index].username"
                      placeholder="姓名"
                      class="input-with-select">
              <el-select slot="prepend"
                         value="1"
                         placeholder="请选择">
                <el-option label="成人"
                           value="1"></el-option>
              </el-select>
            </el-input>
          </el-form-item>

          <el-form-item label="证件类型">
            <el-input v-model="users[index].id"
                      placeholder="证件号码"
                      class="input-with-select">
              <el-select slot="prepend"
                         value="1"
                         placeholder="请选择">
                <el-option label="身份证"
                           value="1"
                           :checked="true"></el-option>
              </el-select>
            </el-input>
          </el-form-item>

          <span class="delete-user"
                @click="handleDeleteUser(index)">-</span>
        </div>
      </el-form>

      <el-button class="add-member"
                 type='primary'
                 @click="handleAddUsers">添加乘机人</el-button>
    </div>

    <div class="air-column">
      <h2>保险</h2>
      <div>
        <div class="insurance-item" v-for="(item,index) in infoData.insurances" :key="index">
          <el-checkbox :label="`${item.type}：￥${item.price}/份×1  最高赔付${item.compensation}`"
                       @change="changeInsurance(item)"
                       border>
          </el-checkbox>
        </div>
      </div>
    </div>

    <div class="air-column">
      <h2>联系人</h2>
      <div class="contact">
        <el-form label-width="60px">
          <el-form-item label="姓名">
            <el-input v-model="contactName"></el-input>
          </el-form-item>

          <el-form-item label="手机">
            <el-input placeholder="请输入内容" v-model="contactPhone">
              <template slot="append">
                <el-button @click="handleSendCaptcha">发送验证码</el-button>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="验证码">
            <el-input v-model="capchaVal"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="warning"
                   class="submit"
                   @click="handleSubmit">提交订单</el-button>
      </div>
    </div>
    <input type="hidden" :value="allPrice">
  </div>
</template>

<script>
export default {
  data () {
    return {
      users: [
        {
          username: '',
          id: ''
        }
      ],            //用户的集合
      insurances: [],        //保险id的集合
      contactName: '',        //联系人
      contactPhone: '',        //联系人号码
      invoice: false,        //是否需要发票
      seat_xid: '',        //座位id
      air: ''    ,    //航班参数
      capchaVal: '',
  infoData: {
    insurances: []
  }    //机票数据
    }


  },
  computed: {
   allPrice (){
     let price = 0;
    //  机票单价
    if(!this.infoData.seat_infos) return 0;
      price += this.infoData.seat_infos.org_settle_price;
    // 基建燃油
    price += this.infoData.airport_tax_audlet;
    // 保险
    price += this.insurances.length * 30;
    // 人数
    price *= this.users.length;
     this.$store.commit("air/computedPrice",price)
   }

  },
  methods: {
    // 添加乘机人
    handleAddUsers () {
      this.users.push({
        username: '',
        id: ''
      });
    },

    // 移除乘机人
    handleDeleteUser (index) {
    //  console.log(index);
    this.users.splice(index,1)
    },

    // 发送手机验证码
    handleSendCaptcha () {
      this.$store.dispatch('user/sendCode',this.contactPhone).then(code => {
          this.$confirm(`获取验证吗成功, 验证码${code}`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "success"
        });
      })
    },

    // 提交订单
    handleSubmit () {

      // 自定义验证
      const rules = {
        users: {
          value: this.users[0].username && this.users[0].id,
          message: '乘机人不能为空'
        },
        contactName: {
          value: this.contactName,
          message: '联系人不能为空'
        },
      contactPhone: {
          value: this.contactPhone,
          message: '手机号不能为空'
        },
   captcha: {
          value: this.capchaVal,
          message: '验证码不能为空'
        }
      };
      // 循环判断
      let flag = true;
      Object.keys(rules).forEach(v => {
      if(!flag){
        return
      };
        if(!rules[v].value){
          flag = false;
          this.$message.warning(rules[v].message);
          return;
        }
      })
      if(!flag){
        return
      };
       const data ={
         users: this.users,
         insurances: this.insurances,
         contactName: this.contactName,
         contactPhone: this.contactPhone,
         captcha: this.capchaVal,
          invoice: false,    
         seat_xid: this.$route.query.seat_xid,
         air: this.$route.query.id
       };
 
      //  登陆需要写响应头
       this.$axios({
         method: 'post',
         url: '/airorders',
        data,
        headers: {
           Authorization: `Bearer ${this.$store.state.user.userInfo.token}`
        }
       }).then((res) => {
          console.log(res)
             const {data: {id}} = res.data;
          if(res.status === 200){
           alert('添加成功，正在跳转。。。。')
          }
           this.$router.push({
                    path: "/air/pay",
                    query: {
                       id
                    }
                });
       });
    },
    changeInsurance(item){
      const index = this.insurances.indexOf(item.id);
      if(index > -1){
        this.insurances.splice(index,1);
      }else{

        this.insurances.push(item.id);
      }
      // console.log(this.insurances);
    }
  },
  mounted (){
    // 获取机票数据
     const {id,seat_xid} = this.$route.query;
     this.$axios({
       url: '/airs/'+ id,
       params: {
         seat_xid
       }
     }).then((res) =>{
      //  console.log(res);
       this.infoData = res.data; 
       this.$store.commit('air/setInfoData',this.infoData);
      //  传递给父组件
      //  this.$emit('setInfoData',this.infoData);
     })
  }
}
</script>

<style scoped lang="less">
.air-column {
  border-bottom: 1px #ddd dashed;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.air-column h2 {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: normal;
}

/deep/ .el-select .el-input {
  width: 130px;
}

.input-with-select {
  width: 590px;
}

.input-with-select /deep/ .el-input-group__prepend {
  background-color: #fff;
}
.member-info /deep/ .el-form-item {
  margin-bottom: 0;
}

.member-info-item {
  border-bottom: 1px #eee dashed;
  padding-bottom: 20px;
  position: relative;

  &:first-child {
    .delete-user {
     margin-right: 177px;
    }
  }
}

.add-member {
  margin-top: 20px;
}

.delete-user {
  display: block;
  background: #ddd;
  width: 16px;
  height: 16px;
  font-size: 14px;
  text-align: center;
  line-height: 16px;
  color: #fff;
  cursor: pointer;
  border-radius: 50px;
  position: absolute;
  right: -30px;
  top: 50%;
}

.insurance {
  > div {
    margin-top: 10px;
  }
}

.insurance-item {
  margin-bottom: 20px;
}

.contact {
  /deep/ .el-input {
    width: 50%;
  }
}

.submit {
  margin: 50px auto;
  display: block;
  width: 250px;
  height: 50px;
}
.member-info-item /deep/ .el-form-item{
    margin-top: 10px;
}

</style>